*{
    margin: 0;
    padding: 0;
}
body{
    padding: 20px;
}
#app{
    width: 718px;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ddd;
}
[v-cloak] {
    display: none;
}
.app-all{
    width: 100%;
    .header{
        width: 100%;
        height: 110px;
        box-sizing: border-box;
        padding: 10px 15px;
        background-color: #dff0d8;
        >div{
            color: #a94442;
            font-size: 24px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .header-ipt{
            width: 100%;
            outline: none;
            height: 34px;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-indent: 12px;
        }
    }
    .content{
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
        .content-items{
            width: 100%;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid #ddd;
            .item{
                position: relative;
                width: 100%;
                height: 45px;
                padding: 0 15px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ddd;
                background-color: #fff;
                @keyframes leave {
                    from{
                        height: 45px;
                    }to{
                        height: 0;
                    }
                }
                .item-input{
                    position: absolute;
                    width: 96%;
                    height: 80%;
                    z-index: -100;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    margin: auto;
                    background-color: #fff;
                    outline: none;
                    border-radius: 6px;
                    text-indent: 12px;
                    border:1px solid #ddd;
                }
                .item-left{
                    >span{
                        user-select: none;
                        color: #333;
                        margin-left: 4px;
                    }
                    .line{
                        text-decoration: line-through;
                        color: #ccc;
                    }
                }
                .item-right{
                    width: 20px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #d9534f;
                    color: #fff;
                    font-size: 12px;
                    border-radius: 2px;
                    overflow: hidden;
                    cursor: pointer;
                    user-select: none;
                }
                &:last-child{
                    border-bottom: none;
                }
            }
        }
    }
    .footer{
        display: flex;
        align-items: center;
        border-top: 1px solid #ddd;
        width: 100%;
        height: 60px;
        padding: 10px 15px;
        box-sizing: border-box;
        >div{
            cursor: pointer;
            border-radius: 4px;
            padding: 10px 15px;
            font-size: 14px;
            transition: 0.1s;
            color: #337ab7;
            &:hover{
                background-color: #ddd;
            }
        }
        .active{
            background-color: #337ab7 !important;
            color: #fff;
        }
    }
}